<script setup lang="ts">
import { ref } from 'vue'
import ConsultItem from './consult-item.vue'
import { patientConsultOrderList } from '@/api/user'
import type { patientConsultOrderListItem } from '@/types/user'
// 基本接口调用
// 1：定义api  2:导入api   3:进入页面调用api  4:定义数据类型  5:存储数据并渲染

/*
van-list
  v-model:loading=是否处于加载中
  finished:是否加载完成
  finished-text:加载完成文本
  @load
     调用接口
     数据累加
     v-model:loading的值改成false
     修改下一页请求条件
     判断是否加载 完成
       如果完成finished的值为true

*/

const props = defineProps<{
  type: 1 | 2 | 3
}>()
const list = ref<patientConsultOrderListItem[]>([])
const loading = ref(false)
const finished = ref(false)
let current = 1
const getData = async () => {
  const res = await patientConsultOrderList({
    current: current,
    pageSize: 10,
    type: props.type
  })
  list.value.push(...res.data.rows)
  loading.value = false
  current++
  if (res.data.total <= list.value.length) {
    finished.value = true
  }

  console.log('列表数据', res.data.total)
}

// 删除数组中某条数据   filter  splice
// list=[{id:1},{id:2}....]
const delEvent = (id: string) => {
  list.value = list.value.filter(item => item.id !== id)
}

// getData()
</script>

<template>
  <div class="consult-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <consult-item v-for="i in list" :key="i.id" :item="i" @delEvent="delEvent" />
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.consult-list {
  padding: 10px 15px;
}
</style>
